import { useMemo } from 'react';
import { useSelector } from 'react-redux';

const StyleTag = () => {
  const theme = useSelector((state: RootState) => state.config.theme);
  const css = useMemo(() => {
    return `:root {
  ${Object.keys(theme).map((key) => `${key}: ${theme[key as keyof typeof theme]};`)}
}`;
  }, [theme]);
  return <style>{css}</style>;
};

export default StyleTag;
